<template>
    <div class="order-wrapper">
        <div class="top-wrap">
            <p class="title-txt">
                <span>全部订单</span>
            </p>

            <div class="img-wrapper">
                <div class="img-wrap">
                    <img class="ad-img" src="@/assets/images/order_01.png">
                </div>

                <span class="order-status"></span>
            </div>
        </div>

        <div class="order-wrap" v-for="item in orderlist" :key="item.order_id">
            <div class="order-box">
                <div class="item-box" :class="{'all':orderAll}">
                    <div class="box-l">
                        <div class="img-wrap">
                            <router-link
                                :to="{ name: 'orderDetail', query: {order_id: item.order_id} }"
                            >
                                <img class="ad-img" :src="constant.api_url + item.product_img">
                            </router-link>
                        </div>

                        <div class="func-box" v-if="item.order_status == 1">
                            <button class="buy-btn" @click="gopay(item)">去付款</button>
                        </div>

                        <!-- <div class="func-box" v-if="item.order_status == 2">
                            <router-link
                                :to="{ name: '/product/detail', query: {id: item.product_id} }"
                            >
                                <button class="buy-btn">再次购买</button>
                            </router-link>
                        </div> -->
                    </div>

                    <div class="box-r">
                        <p class="title-01">
                            <router-link
                                :to="{ name: 'orderDetail', query: {order_id: item.order_id} }"
                            >{{item.product_title}}</router-link>
                        </p>

                        <div class="func-box">
                            <p class="price-txt">
                                <span>实付款:</span>
                                <span class="icon iconfont icon-fl-renminbi"></span>
                                <span class="num-txt">{{item.real_price}}</span>
                                <span class="num-txt">元</span>
                            </p>

                            <p class="func-txt">
                                <span>共计</span>
                                <span>1</span>
                                <span>个项目</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="info-box" v-if="!orderAll">
                <p>
                    <span>订单编号：</span>
                    <span>{{item.order_sn}}</span>
                    <button class="copy-btn">复制</button>
                </p>
                <p>
                    <span>下单时间：</span>
                    <span>{{item.create_time | formatDate}}</span>
                </p>
            </div>
        </div>

        <div class="submit-box">
            <button class="submit-btn" @click="order_list">下拉加载更多</button>
        </div>
        <el-dialog
            title="支付方式"
            :visible.sync="dialogVisible"
           >
            <p style="text-align: center">是否使用优惠券?</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="wxpay">取 消</el-button>
                <el-button type="primary" @click="get_resource">确 定</el-button>
            </span>
        </el-dialog>
        <centerFooter/>
    </div>
</template>

<script type="text/ecmascript-6">
    import centerFooter from "@/views/center/components/centerFooter";
    import constant from "@/utils/constant.js";
    // 引用API文件
    import http from "@/utils/http.js";
    import { formatTime } from "@/utils/index.js";
    import wx from "weixin-jsapi";

    export default {
        name: "order",
        data() {
            return {
                orderAll: true,
                orderlist: [],
                constant: constant,
                p: 0,
                sizeform:{
                    resource:"0"
                },
                dialogVisible:false,
                item:{}
            };
        },
        components: {
            centerFooter
        },
        filters:{
            formatDate(time){
                return moment(time*1000).format('YYYY-MM-DD')
            }
        },
        mounted() {
            let url = window.location.href.split("#")[0];
            http.post(this, {
                url: "pay/wx_config",
                data: {
                    url: url
                },
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    if (data.status == 1) {
                        let wdata = data.info;
                        wx.config({
                            appId: wdata.appId, // 必填，公众号的唯一标识
                            timestamp: wdata.timestamp, // 必填，生成签名的时间戳
                            nonceStr: wdata.nonceStr, // 必填，生成签名的随机串
                            signature: wdata.signature, // 必填，签名，见附录1
                            jsApiList: ["chooseWXPay"]
                        });
                    } else {
                        this.$message({
                            message: data.info,
                            type: "error"
                        });
                    }
                }
            });
        },
        methods: {
            pay(item) {
                let that = this;
                http.post(this, {
                    url: "pay/wx_pay",
                    data: {
                        order_id: item.order_id,
                        token: localStorage.getItem("user_token")
                    },
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        if (data.status == 1) {
                            var args = data.info.wdata;
                            wx.ready(function() {
                                console.log(args);
                                wx.chooseWXPay({
                                    timestamp: args.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                    nonceStr: args.nonceStr, // 支付签名随机串，不长于 32 位
                                    package: args.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                                    signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                    paySign: args.paySign, // 支付签名
                                    success: function(res) {
                                        console.log(res);
                                        if (res.errMsg === "chooseWXPay:ok") {
                                            window.location.reload();
                                        } else {
                                            that.$message({
                                                message: res.errMsg
                                            });
                                        }
                                    },
                                    cancel: function(res) {
                                        console.log(res);
                                        that.$message({
                                            message: "已取消支付"
                                        });
                                    },
                                    fail: function(res) {
                                        console.log(res);
                                        that.$message({
                                            message: "购买失败，请重新支付",
                                            type: "error"
                                        });
                                    }
                                });
                            });
                        } else {
                            that.$message({
                                message: "购买失败，请重新支付",
                                type: "error"
                            });
                        }
                    }
                });
            },
            order_list() {
                this.p++;
                http.get(this, {
                    url: "order/order_list",
                    data: {
                        pagesize: 3,
                        p: this.p,
                        token: localStorage.getItem("user_token")
                    },
                    dataType: "json",
                    success: function(data) {
                        console.log("订单列表:", data);
                        if (data.status == 1) {
                            let info = data.info;
                            if (this.p <= info.total_page) {
                                this.orderlist = this.orderlist.concat(info.list);
                            }
                        }
                    }
                });
            },
            get_resource(){
                    this.$router.push({
                        //核心语句
                        path: "/center/coupon",
                        query:{order_id:this.item.order_id}
                    });
                this.item = {}
                this.dialogVisible = false;
            },
            gopay(item){
                return false;
                this.item = item;
                this.dialogVisible = true;
            },
            wxpay(){
              this.pay(this.item)
              this.item = {}
                this.dialogVisible = false;
            }
        },
        watch: {
            $route() {
                console.log("监听");
                this.orderlist = [];
                this.p = 0;
                this.order_list();
            }
        },
        created() {
            this.order_list();
        }
    };
</script>

<style scoped lang="scss">
    .order-wrapper {
        .top-wrap {
            .title-txt {
                $letHeight: 0.6rem;
                height: $letHeight;
                line-height: $letHeight;
                text-align: center;
                background-color: $c-gray-dark;

                span {
                    font-size: 0.38rem;
                    color: $c-mainC;
                }
            }

            .img-wrapper {
                $letHeight: 1.65rem;
                height: $letHeight;
                width: 100%;
                position: relative;

                .img-wrap {
                    width: 100%;
                    height: $letHeight;
                    overflow: hidden;
                    position: relative;
                    border-radius: 0rem;

                    .ad-img {
                        // @extend .cmm-translateXY;
                        width: 100%;
                    }
                }

                .order-status {
                    @extend .cmm-translateY;
                    left: 0.48rem;
                    font-size: 0.38rem;
                    font-weight: bold;
                    color: $c-black-light;
                }
            }
        }

        .order-wrap {
            @extend .cmm-border;

            .order-box {
                padding: 0.4rem 0;

                .item-box {
                    padding: 0 0.26rem;
                    @extend .cmm-clearfix;
                    margin-top: 0.25rem;
                    $letHeight: 1.94rem;
                    height: $letHeight;

                    &:first-child {
                        margin-top: 0;
                    }

                    .box-l {
                        width: 1.9rem;
                        float: left;

                        $letHeight: 1.3rem;
                        .img-wrap {
                            width: 100%;
                            height: $letHeight;
                            overflow: hidden;
                            position: relative;
                            border-radius: 0.2rem;

                            a {
                                display: inline-block;
                                width: 100%;
                                height: 100%;
                                position: relative;
                            }

                            .ad-img {
                                @extend .cmm-translateXY;
                                width: 100%;
                            }
                        }
                    }

                    .box-r {
                        float: right;
                        width: 5.08rem;
                        padding-left: 0.3rem;

                        .title-01 {
                            font-size: 0.26rem;
                            color: $c-mainC;
                            height: 1.3rem;
                            overflow: hidden;
                            padding: 0.15rem 0;
                            line-height: 0.32rem;
                        }

                        .func-box {
                            $letHeight: 0.43rem;
                            @extend .cmm-clearfix;

                            .func-txt {
                                margin-right: 0.1rem;
                            }

                            .price-txt {
                                float: right;
                                text-align: right;
                                * {
                                    line-height: $letHeight;
                                    vertical-align: middle;
                                }
                            }

                            p {
                                float: right;
                                text-align: right;
                                font-size: 0.26rem;
                                color: $c-mainC;
                                line-height: $letHeight;
                                * {
                                    line-height: $letHeight;
                                    vertical-align: middle;
                                }
                            }

                            span {
                                display: inline-block;
                                line-height: $letHeight;

                                &.num-txt {
                                    color: $c-black-dark;
                                }
                            }

                            .icon {
                                font-size: 0.4rem;
                                margin-right: 0rem;
                                color: $c-black-dark;
                                letter-spacing: -0.1rem;
                            }
                        }
                    }

                    .func-box {
                        $letHeight: 0.43rem;
                        margin-top: 0.22rem;
                        .buy-btn {
                            width: 100%;
                            display: inline-block;
                            float: right;
                            border-radius: 0.8rem;
                            background-color: $c-themeBg;
                            font-size: 0.28rem;
                            font-weight: normal;
                            color: $c-white-light;
                            height: $letHeight;
                            line-height: $letHeight;
                            text-align: center;
                        }
                    }
                }
            }

            .info-box {
                padding: 0.27rem 0.4rem;
                $letHeight: 0.5rem;
                border-top: 0.02rem solid $c-gray-dark;
                p {
                    font-size: 0.26rem;
                    color: $c-mainC;
                    line-height: $letHeight;
                    width: 100%;

                    span {
                        display: inline-block;
                        line-height: $letHeight;
                        color: inherit;

                        margin-right: 0.2rem;
                    }

                    .copy-btn {
                        width: 1.18rem;
                        height: $letHeight;
                        display: inline-block;
                        margin-left: 0.6rem;
                        border-radius: 0.8rem;
                        border: 0.02rem solid $c-gray-dark;
                        background-color: $c-white-light;
                        font-size: 0.26rem;
                        font-weight: normal;
                        color: inherit;
                        line-height: $letHeight;
                        text-align: center;
                    }
                }
            }
        }
    }

    .order-wrapper {
        .order-wrap {
            .order-box {
                .item-box.all {
                    &:first-child {
                    }

                    .box-l {
                        .img-wrap {
                            .ad-img {
                            }
                        }
                    }

                    .box-r {
                        .title-01 {
                        }

                        .func-box {
                            .price-txt {
                            }

                            p {
                            }

                            span {
                            }

                            .icon {
                            }

                            .buy-btn {
                            }
                        }
                    }
                }
            }
        }
    }

    .submit-box {
        @extend .cmm-border;
        padding: 0 0.66rem;
        margin-top: 0.4rem;
    }
</style>
